// 自定义组件基本使用

import React, { useState } from 'react';
import { Button, SafeAreaView, StyleSheet, Text, View } from 'react-native';
const App = () => {
  const [count, setCount] = useState(100);
  // 定义一个传递给子组件的函数
  const handleIncrement = () => {
    setCount(count + 1);
  };
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text>我是父组件</Text>
        <Text>我是父组件</Text>
        <Text>我是父组件</Text>
        <Text>我是父组件</Text>
        <Text>{count}</Text>
        <Child count={count} onIncrement={handleIncrement}></Child>
      </View>
    </SafeAreaView>
  );
};
// 定义子组件接收的props类型
interface CounterProps {
  count: number;
  onIncrement: () => void;
}
const Child = ({ count, onIncrement }: CounterProps) => {
  return (
    <View>
      <Text>我是子组件</Text>
      <Text>{count}</Text>
      <Button
        title="增加计数"
        onPress={() => {
          // 调用父组件传递的函数
          onIncrement();
        }}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
export default App;
